<style lang="scss" scoped>
  .widgets-container{
    float: left;
    width: 580px;
    height: 80px;
    display: block;
    margin:10px 0;
  }

  .icon{
    display: inline-block;
    width:50px;
    height:50px;
    margin:15px;
    background-size:cover;
    float: left;
  }

  .icon-pile{
    @extend .icon;
    background-image:url("../../../assets/images/pile.png");
  }

  .icon-contract{
    @extend .icon;
    background-image:url("../../../assets/images/contract.png");
  }

  .icon-organization{
    @extend .icon;
    background-image:url("../../../assets/images/work.png");
  }

  .icon-section{
    @extend .icon;
    background-image:url("../../../assets/images/section.png");
  }

  .icon-responsibility{
    @extend .icon;
    background-image:url("../../../assets/images/responsibility.png");
  }

  .icon-supervisor{
    @extend .icon;
    background-image:url("../../../assets/images/supervisor.png");
  }

  .icon-construction{
    @extend .icon;
    background-image:url("../../../assets/images/constuction.png");
  }

  .icon-times{
      @extend .icon;
      background-image:url("../../../assets/images/time.png");
  }


  .icon-text{
    font-size: 16px;
    font-family: '微软雅黑';
    display: inline-block;
    color: #777;
    height: 30px;
    line-height: 30px;
    text-indent: 5px;
  }

  .icon-desc{
    width: 220px;
    float: left;
  }

  .icon-title{
    @extend .icon-text;
    margin-top: 10px;
  }

  .icon-value{
    @extend .icon-text;
  }

</style>
<template>
    <div class="widgets-container">
        <span :class="'icon-'+icon"></span>
        <div class="icon-desc">
          <span class="icon-title">{{title}}</span>
          <br>
          <span class="icon-value">{{value}}</span>
        </div>
    </div>
</template>
<script>
    export default {
      name:"Widgets",
      props:{
        icon:{
          type:String,
          required:true,
          default:'icon-pile'
        },
        title:{
          type:String,
          default:'标段名称'
        },
        value:{
          type:String,
          required:true
        }
      }
    }
</script>
